<template>
  <div class="shop">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>店铺管理</span>
        <el-button
          style="float: right; padding: 3px 0"
          @click="isEdit = !isEdit"
          v-if="!isEdit"
          type="text"
          >编辑</el-button
        >
        <el-button
          v-else
          @click="
            isEdit = !isEdit;
            confirm();
          "
          style="float: right; padding: 3px 0"
          type="text"
          >保存</el-button
        >
      </div>
      <el-form :disabled="!isEdit" ref="form" :model="form" label-width="80px">
        <el-form-item label="店铺名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告">
          <el-input type="textarea" v-model="form.bulletin"></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            :action="`${API}/shop/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload
            :action="`${API}/shop/upload`"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleShopUpload"
            :file-list="form.pics"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.pics" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input-number
            v-model="form.deliveryPrice"
            :min="1"
            :max="1000"
            label="配送费"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="配送时间">
          <el-input-number
            v-model="form.deliveryTime"
            :min="1"
            :max="1000"
            label="配送时间"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="配送描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="店铺评分">
          <el-input v-model="form.score"></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input-number
            v-model="form.sellCount"
            :min="1"
            :max="100000"
            label="销量"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="活动">
          <el-checkbox-group v-if="form.supports" v-model="form.supports">
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
            <el-checkbox label="单人精彩套餐"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特色套餐"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="form.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { shopInfo, shopEdit } from "@/api/shop";
export default {
  data() {
    return {
      //服务器地址
      API: "http://sell.h5.itsource.cn:8087",
      form: {},
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      isEdit: false,
    };
  },
  methods: {
    //获取店铺数据
    async getData() {
      let res = await shopInfo();
      //修改数据
      // console.log('店铺详情',res);
      let pics = res.data.data.pics.map((v) => {
        return {
          url: v,
        };
      });
      this.form = { ...res.data.data, pics };
    },
    //成功时触发
    async handleAvatarSuccess(res) {
      console.log(res);
      let { code, msg, imgUrl } = res;
      if (code === 0) {
        this.$message.success(msg);
        //回显
        this.form.avatar = imgUrl;
      }
    },
    //多图上传成功的钩子
    handleShopUpload(res) {
      console.log("多图", res);
      let { code, msg, imgUrl } = res;
      if (code === 0) {
        this.form.pics.push({
          url: imgUrl,
        });
        this.$message.success(msg);
      }
      // console.log(this.form.pics);
    },
    //删除
    handleRemove(file, fileList) {
      // console.log('删除',file, fileList);
      this.form.pics = fileList;
    },
    //保存编辑
    async confirm() {
      let pics = this.form.pics.map((v) => v.url);
      let res=await shopEdit({
        ...this.form,
        pics
      })
      console.log(res);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片大小约束
    beforeAvatarUpload(file) {
      const isJPG = /(png|jpeg)/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是PNG JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px 20px;
  margin-top: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
}
.el-button--text {
  background-color: #d99bac;
  border: 0;
  padding: 7px 12px !important;
  color: #fff;
}
</style>